import * as API from '@/services';
import {
  KfBackendEnumPicker,
  DEFAULT_FORM_LAYOUT,
  KfBizQuickFormProps,
  KfFloatingContextProps,
  KfInput,
  KfQuickForm,
  KfTextArea, KfUpload, KfUserPicker,
} from 'kf-web-library';
import {Button, Card, Form, Input, Tabs} from 'antd';
import React, {FunctionComponent, useState} from 'react';
import HxJournalPicker from "@/components/HxJournalPicker";
import HxJournalPeriodPicker from "@/components/HxJournalPeriodPicker";
import HxJournalColumnPicker from '@/components/HxJournalColumnPicker';
import KfMaterialUpload from "@/components/KfMaterialUpload";
import {CloseOutlined} from "@ant-design/icons";

const FormItem = Form.Item;
type QueryEntity = API.Article;
type CreateEntity = API.Article_Create;
type ModifyEntity = API.Article_Modify;

type DataFormProps = {} & KfBizQuickFormProps & KfFloatingContextProps;

/**
 * 文章 表单
 */
const QuickForm: FunctionComponent<DataFormProps> = (props) => {
  const {formType, bizId, ...rest} = props;
  const [gnTabsActiveKey, setGnTabsActiveKey] = useState('a');

  return (
    <KfQuickForm
      formType={formType}
      formProps={{
        labelCol: {
          flex: '0 0 100px',
        },
        wrapperCol: {
          flex: '1',
        },
      }}
      defaultQueryRequest={() =>
        API.queryArticle(bizId!).then((resp) => {
          if (resp.flag) {
            resp.data = {
              ...resp.data,
              journalId: resp.data?.journal?.id,
              periodId: resp.data?.period?.id,
              columnId: resp.data?.column?.id,
            } as any;
          }
          return new Promise((resolve) => resolve(resp));
        })
      }
      submitRequest={{
        create: (formValues) => API.createArticle({...formValues} as CreateEntity),
        modify: (formValues) => API.patchArticle({
          articleImageUrl: formValues.articleImageUrl,
          id: bizId,
          attachmentVideo: formValues.attachmentVideo?.map((t,tindex)=>{
            return {
              ...t,
              articleId: bizId,
              fileType: "VIDEO",
              seq: tindex+1,
            }
          })
        } as ModifyEntity),
      }}
      {...rest}
    >
      <Tabs
        tabPosition="left"
        activeKey={gnTabsActiveKey}
        onChange={(key) => setGnTabsActiveKey(key)}
        items={[
          {
            label: '基础信息',
            key: 'a',
            className: 'journal-tabpane',
            forceRender: true,
            children: (
              <>
                <FormItem name={nameof<ModifyEntity>((x) => x.articleTitleCn)} label="标题" rules={[{required: false}]}>
                  <KfInput readonly={true}/>
                </FormItem>
                <FormItem name={nameof<ModifyEntity>((x) => x.articleAuthorCn)} label="作者" rules={[{required: false}]}>
                  <KfInput readonly={true}/>
                </FormItem>
                <FormItem name={nameof<ModifyEntity>((x) => x.articleKeywordCn)} label="关键词" rules={[{required: false}]}>
                  <KfInput readonly={true}/>
                </FormItem>
                <FormItem name={nameof<ModifyEntity>((x) => x.articleDoi)} label="DOI" rules={[{required: false}]}>
                  <KfInput readonly={true}/>
                </FormItem>
                <FormItem name={nameof<ModifyEntity>((x) => x.journalId)} label="所属期刊" rules={[{required: false}]}>
                  <HxJournalPicker.TableSelect readonly={true}/>
                </FormItem>
                <FormItem name={nameof<ModifyEntity>((x) => x.periodId)} label="所属刊期" rules={[{required: false}]}>
                  <HxJournalPeriodPicker.TableSelect readonly={true}/>
                </FormItem>
                <FormItem name={nameof<ModifyEntity>((x) => x.columnId)} label="所属栏目" rules={[{required: false}]}>
                  <HxJournalColumnPicker.TableSelect readonly={true}/>
                </FormItem>
                <FormItem name={nameof<ModifyEntity>((x) => x.articleImageUrl)} label="封面图" rules={[{required: false}]}>
                  <KfMaterialUpload.Avatar materialType={'IMG'} />
                </FormItem>
              </>
            ),
          },
          {
            label: '视频',
            key: 'b',
            className: 'article-tabpane',
            forceRender: true,
            children: (
              <>
                <Form.List name="attachmentVideo">
                  {(fields, { add, remove }) => {
                    return (
                      <div style={{ display: 'flex', rowGap: 16, flexDirection: 'column' }}>
                        {fields.map((field) => (
                          <Card
                            size="small"
                            title={`视频 ${field.name + 1}`}
                            key={field.key}
                            extra={
                              <CloseOutlined
                                onClick={() => {
                                  remove(field.name);
                                }}
                              />
                            }
                          >
                            <Form.Item label="视频名" name={[field.name, 'fileName']}>
                              <KfInput/>
                            </Form.Item>
                            <Form.Item label="视频封面" name={[field.name, 'fileCoverUrl']}>
                              <KfMaterialUpload.Avatar materialType={'IMG'} />
                            </Form.Item>
                            <Form.Item label="视频文件" name={[field.name, 'fileUrl']}>
                              <KfMaterialUpload.Avatar materialType={'VIDEO'} />
                            </Form.Item>
                          </Card>
                        ))}
                        <Button type="dashed" onClick={() => add()} block>
                          + 添加视频
                        </Button>
                      </div>
                    )
                  }}
                </Form.List>
              </>
            ),
          }
        ]}
        />



    </KfQuickForm>
  );
};

export default QuickForm;
